<script lang="ts">
import Vue from 'vue'
import tips from "@/utils/tips";
import NavBar from "@/components/nav-bar/nav-bar.vue";
import Popup from "@/components/popup/popup.vue";
import {copyFun} from "@/utils/utils";
import {getStores} from "@/services/Agents/store";
import {Stores} from "@/types/agent/stores";


export default Vue.extend({
  name: "Stores",
  components: {Popup, NavBar},
  data() {
    return {
      storeList: [] as Stores[],
      loading: false,
      hasMore: false,

      updateStorePopup: false,
      selectStore: 0,
    }
  },
  computed: {
    lang() {
      return this.$t('agentPages.stores')
    },
  },
  onLoad() {
    this.getStoresList()
    // this.getStoreDataList(latitude, longitude)
  },
  methods: {
    copyFun,
    async getStoresList() {
      uni.showLoading({title: '加载中...'})
      const storesRes = await getStores()
      const {code, data, msg} = storesRes
      console.log("storesRes -=-=-=-=", storesRes)
      if (code === 200) {
        this.storeList = data.data
      } else {
        tips.toast(msg)
      }
      console.log("storesRes -=-=-=-=", storesRes)
      uni.hideLoading()
    },
    onStore(index: number) {
      this.selectStore = index
      this.updateStorePopup = true
    },
    // 修改店铺
    onModifyStore(index: number) {
      const store = encodeURIComponent(JSON.stringify(this.storeList[this.selectStore]))
      const routes = {
        0: `/pages/Agent/Store/MachineBind?store=${store}`,  // 绑定设备
        1: `/pages/Agent/Store/Machines?store=${store}`,      // 机器管理
        2: `/pages/Agent/Store/StoreDetails?store=${store}`,  // 商家详情
        3: ''  // 删除功能
      }
      if (routes[index]) {
        uni.navigateTo({url: routes[index]})
      }
      this.updateStorePopup = false
    }
  }
})
</script>

<template>
  <view>
    <nav-bar :page-title="lang.pageName"/>
    <view :class="['margin-20', locale]">
      <template v-if="storeList.length >= 1">
        <view class="radio-20 padding-30 text-32 bg-white gap-20 flex-column">

          <view v-for="(item, index) in storeList" :key="index" @click="onStore(index)" hover-class="hover">
            <view class="flex-between" style="margin-bottom: 10rpx">
              <view class="flex-center gap-30">
                <!-- 照片-->
                <view class="agent-store-image-box">
                  <view :class="['store-image-label', item.machines.length ? '' : 'is-not']"
                        :style="{borderRadius: locale === 'ug-CN' ? '0 20rpx' : '20rpx 0'}">
                    {{ lang.storeStatus[item.machines.length ? 'bound' : 'unbound'] }}
                  </view>
                  <image class="radio-20 store-image" :src="item.logo || '/static/img/no_store.jpg'"/>
                </view>

                <!-- 商家名和地址-->
                <view class="flex-column gap-8">
                  <view class="text-36" style="line-height: normal">{{ item.name }}</view>
                  <view class="text-28 color-grey" :hover-stop-propagation="false" @longpress="copyFun(item.phone)">
                    {{ item.phone }}
                  </view>
                  <view class="text-28 color-grey">{{ item.address }}</view>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 底部提示-->
        <view class="margin-top-40 color-grey text-32 safe-area-padding" style="width: 100%;">
          <view v-if="loading" class="center gap-20">
            <u-loading-icon/>
            <view>{{ otherLang.loading }}</view>
          </view>
          <view v-if="!loading && !hasMore" class="flex-between">
            <view class="line-weight-30"/>
            <view>{{ otherLang.no_more }}</view>
            <view class="line-weight-30"/>
          </view>
        </view>
      </template>


      <view v-if="storeList.length <= 0" class="center" style="height: 60vh;">
        <u-empty
            mode="data"
            :width="240"
            :hidden="240"
            :textSize="22"
            :text="lang.emptyStore"
            icon="http://cdn.uviewui.com/uview/empty/data.png"
        />
      </view>

      <!-- 设备管理弹窗 -->
      <popup :show="updateStorePopup" @update:show="updateStorePopup = $event">
        <template
            v-if="storeList[selectStore] && storeList[selectStore].machines.length <= 0">
          <view class="padding-tb-20 flex-row" @click="onModifyStore(0)">
            <view style="margin:auto 16rpx;">
              <u-icon name="plus-circle-fill" size="34" color="#1073FF"/>
            </view>
            <view class="column gap-8" style="align-items: flex-start">
              <view class="text-32 text-bold">{{ lang.manageOptions.bindDevice['title'] }}</view>
              <view class="option-description">{{ lang.manageOptions.bindDevice['desc'] }}</view>
            </view>
          </view>
          <!--          <view class="padding-tb-20 flex-row" @click="onModifyStore(3)">-->
          <!--            <view style="margin:auto 16rpx;">-->
          <!--              <u-icon name="trash-fill" size="34" color="#1073FF"/>-->
          <!--            </view>-->
          <!--            <view class="column gap-8" style="align-items: flex-start">-->
          <!--              <view class="text-32 text-bold">{{ '删除商家' }}</view>-->
          <!--              <view class="option-description">{{ '不绑定设备的删除商家' }}</view>-->
          <!--            </view>-->
          <!--          </view>-->
        </template>

        <template v-if="storeList[selectStore] && storeList[selectStore].machines.length >= 1">
          <view class="padding-tb-20 flex-row" @click="onModifyStore(1)">
            <view style="margin:auto 16rpx;">
              <u-icon name="grid-fill" size="34" color="#1073FF"/>
            </view>
            <view class="flex-column gap-8" style="align-items: flex-start">
              <view class="text-32 text-bold">{{ lang.manageOptions.deviceManage['title'] }}</view>
              <view class="option-description">{{ lang.manageOptions.deviceManage['desc'] }}</view>
            </view>
          </view>


          <view class="padding-tb-20 flex-row" @click="onModifyStore(2)">
            <view style="margin:auto 16rpx;">
              <u-icon name="file-text-fill" size="34" color="#1073FF"/>
            </view>
            <view class="flex-column gap-8" style="align-items: flex-start">
              <view class="text-32 text-bold">{{ lang.manageOptions.storeDetails.title }}</view>
              <view class="option-description">{{ lang.manageOptions.storeDetails.desc }}</view>
            </view>
          </view>
        </template>
      </popup>

    </view>
  </view>
</template>

<style scoped lang="scss">
.agent-store-image-box {
  position: relative;

  .store-image-label {
    position: absolute;
    top: 0;
    color: #fff;
    font-size: 16rpx;
    background: #00bcd4;
    padding: 6rpx 12rpx;
    background: rgba(1, 106, 255, 0.82);

    :global(.zh-CN) & {
      left: 0;
      border-radius: 20rpx 0;
    }

    :global(.ug-CN) & {
      right: 0;
      border-radius: 0 20rpx;
    }

    &.is-not {
      color: #F25050;
      background: #FFEDED;
      border: 1rpx solid #FFEDED;
    }
  }

  .store-image {
    width: 160rpx;
    height: 160rpx;
  }
}

.select-icon {
  width: 60rpx;
  height: 60rpx;
  display: block;
  margin: auto;
}

.option-item {
  padding: 20rpx;
}

.option-description {
  color: grey;
  font-size: 24rpx;
}
</style>